<script setup>
import { nextTick, onMounted, reactive, ref, watchEffect } from 'vue'
import { useStore } from 'vuex'
import { LockOutlined, MobileOutlined } from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import Icon from '@ant-design/icons-vue'

import md5 from 'md5'
let activeKey = ref('1')
const store = useStore()
const route = useRoute()
const router = useRouter()
const formState = reactive({
	username: '123456',
	password: '123456',
	mobile: '',
	code: '',
	checked: true,
})
let required = reactive({
	username: false,
	password: false,
	mobile: false,
	code: false,
})
const formRef = ref()
watchEffect(() => {
	if (activeKey.value == 1) {
		required.username = true
		required.password = true
		required.mobile = false
		required.code = false
		nextTick(() => {
			formRef.value.clearValidate(['mobile', 'code'])
		})
	} else if (activeKey.value == 2) {
		required.username = false
		required.password = false
		required.mobile = true
		required.code = true
		nextTick(() => {
			formRef.value.clearValidate(['username', 'password'])
		})
	}
})
// console.log(store);
const submit = async () => {
	try {
		await formRef.value.validateFields()
		// 校验成功 做登录处理，
		if (formState.checked) {
			// 保存自动登录
			// console.log(formState.checked, '自动登录为')
		}
		// axios请求登录
		// login() 请求参数
		const data = {
			account: formState.username,
			password: md5(formState.password),
		}
		const res = await store.dispatch('index/login', data)
		// res为200 登录成功，路由跳转到 / 或者 上一次的路由路径
		if (res.code === 200) {
			await store.dispatch('index/getMenu')
			// 路由重定向跳转
			console.log(router.getRoutes());
			const redirect = route.query.redirect || '/home/' + res.data.organizationList[0].code
			router.push({
				path: redirect,
			})
		}
	} catch (error) {
		console.log(error)
	}
}

const handleUsername = (rule, value) => {
	try {
		if (value != '123456') {
			return Promise.reject('自定义校验成功，请输入admin')
		} else {
			// 验证成功
			return Promise.resolve('验证成功')
		}
	} catch (error) {
		console.log(error)
	}
}
</script>
<template>
	<div class="form">
		<a-form :model="formState" ref="formRef" name="basic" autocomplete="off" :scrollToFirstError="true">
			<a-tabs v-model:activeKey="activeKey" centered>
				<a-tab-pane key="1" tab="账号密码登录">
					<a-form-item
						name="username"
						:rules="[
							{ required: required.username, validator: handleUsername },
							{ whitespace: true, message: '请不要填写特殊空格符!' },
						]"
					>
						<a-input size="large" type="text" v-model:value="formState.username" placeholder="请输入用户名">
							<template #prefix>
								<!-- <user-outlined type="user" /> -->
								<icon>
									<template #component>
										<svg
											t="1645083265607"
											class="icon"
											viewBox="0 0 1024 1024"
											version="1.1"
											xmlns="http://www.w3.org/2000/svg"
											p-id="2100"
											width="30"
											height="30"
										>
											<path
												d="M600.854337 508.918696c83.413189-34.870622 142.215855-117.318793 142.215855-213.215819 0-127.386502-103.672432-231.057911-231.070191-231.057911-127.402876 0-231.074285 103.671409-231.074285 231.057911 0 95.897025 58.768895 178.345196 142.214831 213.215819-164.229118 40.115287-286.623723 188.071107-286.623723 364.45045l0 86.656183 750.967377 0L887.4842 873.369145C887.483177 696.989802 765.066058 549.033982 600.854337 508.918696L600.854337 508.918696zM309.806675 295.702877c0-2.35575 0.268117-4.670566 0.384779-7.037572 52.666664-31.390212 89.897129-81.595721 104.967992-139.780284 40.358844 71.775663 115.928062 117.942013 199.552061 117.942013 31.680843 0 62.866385-7.352764 92.961037-20.943864 4.095443 15.95606 6.515664 32.597764 6.515664 49.819707 0 111.510263-90.704552 202.182068-202.188208 202.182068C400.511227 497.884945 309.806675 407.21314 309.806675 295.702877L309.806675 295.702877zM309.806675 295.702877"
												p-id="2101"
											></path>
										</svg>
									</template>
								</icon>
							</template>
						</a-input>
					</a-form-item>
					<a-form-item name="password" :rules="[{ required: required.password, message: '密码!' }]">
						<a-input-password
							size="large"
							v-model:value="formState.password"
							autocomplete
							placeholder="密码"
							:onPressEnter="submit"
						>
							<template #prefix>
								<lock-outlined />
							</template>
						</a-input-password>
					</a-form-item>
				</a-tab-pane>
				<a-tab-pane key="2" tab="手机号登录">
					<a-form-item name="mobile" :rules="[{ required: required.mobile, message: '手机号!' }]">
						<a-input size="large" v-model:value="formState.mobile" placeholder="请输入手机号">
							<template #prefix>
								<mobile-outlined />
							</template>
						</a-input>
					</a-form-item>
					<a-form-item name="code" :rules="[{ required: required.code, message: '请输入正确的验证码!' }]">
						<a-row>
							<a-col :span="12">
								<a-input size="large" v-model:value="formState.code" placeholder="验证码"></a-input
							></a-col>
							<a-col :span="8" offset="4">
								<a-button size="large" type="primary" :block="true">获取验证码</a-button>
							</a-col>
						</a-row>
					</a-form-item>
				</a-tab-pane>
			</a-tabs>
			<a-form-item>
				<a-row justify="space-between">
					<a-col>
						<a-checkbox v-model:checked="formState.checked">自动登录</a-checkbox>
					</a-col>
					<a-col> <router-link to="">忘记密码</router-link></a-col>
				</a-row>
			</a-form-item>
			<a-form-item>
				<a-button size="large" type="primary" block @click="submit"> 登录</a-button>
			</a-form-item>
			<a-form-item>
				<a-row justify="space-between">
					<a-col>其他登录方式</a-col>
					<a-col><router-link :to="{ name: 'register' }">注册账号</router-link></a-col>
				</a-row>
			</a-form-item>
		</a-form>
	</div>
</template>
<style scoped lang="less">
h1 {
	font-size: 35px;
}
.form {
	width: 450px;
	margin: 10px auto 0;
	padding: 20px 20px;
	background-color: rgba(223, 234, 235, 0.7);
}
</style>
